<template>
  <div class="main_width">
    <el-form ref="form" :inline="true" label-position="top" :disabled="audio_edit.state!=1">
      <div>
        <el-upload
          class="upload-demo"
          drag
          :http-request="addfile"
          :show-file-list="false"
          accept="audio/wav,audio/mp3,audio/ogg,audio/mp4"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将音频文件拖到此处，或<em>点击选择</em></div>
        </el-upload>
      </div>
      <el-divider></el-divider>
      <div>音频列表</div>
      <div v-for="item,index in fillarr" style="padding-left:30px;">
        <el-divider></el-divider>
        <el-form-item :label="index+1+'.'+item.name+' 时间截取:'" style="width: 100%">
          <el-slider
            v-model="item.stoptime"
            range
            show-input
            step="0.01"
            :max="item.duration">
          </el-slider>
        </el-form-item>
        <el-form-item label="插入点(为空时自动顺延拼接)：">
          <el-input type="number" v-model="item.inserttime" placeholder="插入到（秒/时间）"></el-input>
        </el-form-item>
        <el-form-item label="通道：">
          <el-checkbox-group v-model="item.insertchannel">
            <el-checkbox :label="'0,0'">左=>左</el-checkbox>
            <el-checkbox :label="'1,1'">右=>右</el-checkbox>
            <el-checkbox :label="'0,1'">左=>右</el-checkbox>
            <el-checkbox :label="'1,0'">右=>左</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="操作：">
          <el-button type="primary" @click="copyfile(index)">复制</el-button>
          <el-button type="primary" @click="removefile(index)">移除</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-divider></el-divider>
    <el-form ref="form" :disabled="audio_edit.state!=1">
      <el-form-item label="输出音频通道：">
        <el-radio-group v-model="outchannel">
          <el-radio :label="1">单声道</el-radio>
          <el-radio :label="2">双声道</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="输出音频格式：">
        <el-radio-group v-model="outformat">
          <el-radio :label="'mp3'">mp3(.mp3)</el-radio>
          <el-radio :label="'ogg'">ogg(.ogg)</el-radio>
          <el-radio :label="'aac'">aac(.mp4)</el-radio>
          <el-radio :label="'wma'">wma(.asf)</el-radio>
          <el-radio :label="'wav'">wav(.wav)</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <el-form ref="form">
      <el-form-item label="操作：">
        <el-button type="primary" v-if="audio_edit.state==1" @click="start">开始编译</el-button>
        <el-button type="primary" v-else @click="stop">停止编译</el-button>
      </el-form-item>
    </el-form>
    <el-progress :text-inside="true" :stroke-width="20" :percentage="audio_edit.progress"></el-progress>
  </div>
</template>
<script>
  import audioedit from '../../static/audio_edit.js';
  export default {
    data(){
      return {
        progress:0,
        outformat:"mp3",//输出编码格式 mp3, ogg, aac(mp4), wma(asf), wav，默认mp3
        outchannel:2,   //输出音频声道数1,2，默认2
        fillarr:[],
        audio_edit: new audioedit()
      }
    },
    created () {

    },
    mounted(){

    },
    methods: {
      addfile(val){
        var reader = new FileReader();
        reader.onload = async (e) => {
          let audio = await this.toaudio(val.file);
          this.fillarr.push({
            name:val.file.name,
            buffer:e.target.result,
            duration:audio.duration,//原音频时长
            stoptime:[0,audio.duration],//截取-时间s，默认全部
            inserttime:false,//插入到-时间s，默认顺延拼接
            insertchannel:['0,0','1,1'] //通道操作 '0,0','1,1','0,1','1,0' 多选 ex:'0,1'左=>右
          });
        };
        reader.readAsArrayBuffer(val.file);
      },
      toaudio(file){
        return new Promise((resolve, reject) => {
          let audio = new Audio(URL.createObjectURL(file));
          audio.onloadedmetadata = () => {
            //加载完成后返回audio
            resolve(audio)
          }
        })
      },
      copyfile(index){
        let newfile = JSON.parse(JSON.stringify(this.fillarr[index]))
        newfile.buffer = this.fillarr[index].buffer
        this.fillarr.splice(index,0,newfile)
      },
      removefile(index){
        this.fillarr.splice(index,1)
      },
      async start(){
        let res = await this.audio_edit.edit({
          outformat:this.outformat,//输出格式 mp3, ogg, aac, wma, wav
          outchannel:this.outchannel,//输出音频声道数 1,2
          files: this.fillarr
        });
        if(res.code==200){
          this.download(res.name,res.buffer)
        }else{
          this.$message.error(res.message);
        }
      },
      async stop(){
        this.audio_edit.stop();
      },
      download(name,buffer){
        var href = window.URL.createObjectURL(new Blob([buffer]));
        //生成链接
        const a = document.createElement("a");
        a.download = name;
        a.href = href;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(href);
      },
    }
  }
</script>

